<template>
  <div class="app-container">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row>
      <el-table-column align="center" label="用户ID" prop="userId"/>
      <el-table-column align="center" label="用户昵称" prop="userName" />
      <el-table-column align="center" label="反馈联系电话" prop="contactMobile" width="110" />
      <el-table-column align="center" label="反馈内容" prop="content" width="200" />
      <el-table-column align="center" label="反馈图片" width="300">
        <template slot-scope="scope">
          <div v-for="(item,index) in scope.row.image" :key="index" class="imgs">
            <img :src="item" class="img" title="点击放大" @click="scaleImg(item)">
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">{{ scope.row.createDate | filterTime }}</template>
      </el-table-column>
      <el-table-column align="center" label="状态" prop="stateValue" />
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="changeStatus(scope.row.id,scope.row.state)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.currentPages" :limit.sync="listQuery.pageSize" align="center" @pagination="fetchData" />
    <el-dialog :visible.sync="centerDialogVisible" title="图片详情" width="80%" center>
      <img :src="curScaleImg" class="curScaleImg">
    </el-dialog>
    <el-dialog :visible.sync="dialogFormVisible" title="编辑状态">
      <el-form>
        <el-form-item label="请选择">
          <el-select v-model="value" placeholder="请选择状态">
            <el-option label="未开始" value="1" />
            <el-option label="进行中" value="2" />
            <el-option label="已解决" value="3" />
            <el-option label="取消" value="4" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStatus()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getUserFeedbackList, userFeedbackUpdate } from '@/api/table'
import Pagination from '@/components/Pagination'
import { parseTime } from '@/utils/index'

export default {
  name: 'Feedback',
  components: { Pagination },
  filters: {
    filterTime(time) {
      return parseTime(time)
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      totalPages: 0,
      listQuery: {
        currentPages: 1,
        pageSize: 15
      },
      curScaleImg: '',
      centerDialogVisible: false,
      curId: '',
      dialogFormVisible: false,
      value: '未开始'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getUserFeedbackList(this.listQuery).then(response => {
        this.list = response.data.dataList
        this.total = response.data.totalElements
        this.totalPages = response.data.totalPages
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      })
      this.listLoading = false
    },
    scaleImg(url) {
      this.curScaleImg = url
      this.centerDialogVisible = true
    },
    changeStatus(id, state) {
      this.dialogFormVisible = true
      this.curId = id
      this.value = state
    },
    updateStatus() {
      this.listLoading = true
      userFeedbackUpdate({
        id: this.curId,
        state: this.value
      }).then(response => {
        setTimeout(() => {
          this.listLoading = false
        }, 300)
        if (response.code === 200) {
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          this.dialogFormVisible = false
          this.listQuery.currentPages = 1
          this.fetchData()
        } else {
          this.$message.error('操作失败请重试')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  .imgs{
    width:100px;
    height:100px;
    display:inline-block;
    margin: 0 10px;
    border:1px solid #eee;
    .img{
      width:100px;
      height:100px;
      display:inline-block;
      cursor: pointer;
    }
  }
  .el-dialog__body{
    text-align: center;
    .curScaleImg{
      max-width:100%;
      height:auto;
      margin:0 auto;
    }
  }
}
</style>
